@()(implicit session: Session)
@english.home.main("Organelle genomes platform") {
    <link rel="stylesheet" href="@routes.Assets.versioned("img-carousel/carousel.css")">


    <div id="container" style="margin-top: 50px;">

        <div class="official clearfix">

            <div class="home-left-side">
                <section class="team clearfix">
                    <p>Algae is the earliest evolutionary biological group on the earth, are thought to have appeared
                        at least 2.6 billion years ago. As the most complex biological group, algae have shown the high
                        diversity during the long evolutionary history. Algae are widely distributed in 4 kingdoms of
                        the Eukaryota, including the Plantae, Protozoa, Acritarcha, Chromista and Fungi. Up to now,
                        there are 46,177 species of eukaryotic algae have been recognized and classified (AlgaeBase,
                        2020), but in fact, more species need the further confirmation.</p>
                    <p>The mitochondria and chloroplast are unique organelles in the biological systems which have their
                        own distinct DNA. The conformation of DNA can be circular or linear and the mode of replication
                        is different from that of the nuclear genome. The structural and genomic variations in these
                        organelles would reveal the evolution characteristics of different algae further.</p>
                    <p>However, an integrative organelle genomic database for multiple algae which enables users to
                        jointly examine and use relevant data have not been available. To provide an organelle genomics
                        platform for the algae, we developed a user friendly database named the OGBA. Currently, OGBA
                        contains genomic data from public databases, and organelle genome data determined by our own
                        laboratory. A variety of applications were integrated in this website to analyze the structural
                        characteristics, collinearity and phylogeny of organelle genomes from algae.</p>
                </section>

                <section>

                    <form method="get" action="/US/PODB/search/searchBefore">

                        <select style="float: left;
                            height: 35px;
                            width: 180px" class="form-control" name="db">
                            <option value="all" selected>All Database</option>
                            <option value="cp">Chloroplast Genome</option>
                            <option value="mt">Mitochondria Genome</option>
                        </select>

                        <input type="text" class="form-control" name="input"
                            placeholder="Keyword"
                            id="searchInfo" style="height: 35px;
                            width: 560px;
                            float: left;
                            margin-left: 10px">
                        <button type="submit"  class="btn btn-primary" style="top: 3px;
                            right: 14px;
                            font-size: 15px;
                            height: 35px;">Search <i class="fa fa-search"></i> </button>
                        <span class="help-block" style="margin-left: 190px">
                            e.g.,&nbsp;<a href="#" onclick="showSearchExample()" class="resLink"><em id="egSearch">
                            example</em></a></span>
                    </form>

                </section>


                <section>
                    <h2 class="smart-head" style="margin-bottom: 10px;
                        margin-top: 20px;">Geographical distribution</h2>
                    <div id="worldmap">加载地图数据中</div>


                   @* <ul class="services">
                        <li class="service">
                            <figure class="service-thumb"><a href="#">
                                <i class="fa fa-wrench" style="font-size: 100px"></i></a>
                            </figure>
                            <h4><a href="@routes.ToolsController.blastBefore()">BLAST</a></h4>
                            <p>BLAST (basic local alignment search tool) is an algorithm for comparing primary biological
                                sequence information, such as the amino-acid sequences of proteins or the nucleotides of
                                DNA and/or RNA sequences.</p>
                        </li>
                        <li class="service">
                            <figure class="service-thumb"><a href="#">
                                <i class="fa fa-circle-o" style="font-size: 100px"></i></a>
                            </figure>
                            <h4><a href="#">Synteny</a></h4>
                            <p>In classical genetics, synteny describes the physical co-localization of genetic loci on
                                the same chromosome within an individual or species.</p>
                        </li>
                        <li class="service">
                            <figure class="service-thumb"><a href="#">
                                <i class="fa fa-upload" style="font-size: 100px"></i></a>
                            </figure>
                            <h4><a href="#">Upload</a></h4>
                            <p>Submit data in accordance with NCBI mode.Similar to NCBI upload process.Support domestic
                                database</p>
                        </li>
                        <li class="service">
                            <figure class="service-thumb"><a href="@routes.DownloadController.downloadBeforeUS()">
                                <i class="fa fa-download" style="font-size: 100px"></i></a>
                            </figure>
                            <h4><a href="#">Download</a></h4>
                            <p>It supports the downloading of full data, batch downloading of groups (phylum, class, order,
                                family, genus) and species, and selection of related genes (amino acids and nucleotides) to
                                support the comprehensive search function.</p>
                        </li>
                        <li class="service">
                            <figure class="service-thumb"><a href="#">
                                <i class="fa fa-area-chart" style="font-size: 100px"></i></a>
                            </figure>
                            <h4><a href="#">Statistics</a></h4>
                            <p>Statistical analysis of data, including the number of data species (phylum, class, order,
                                family, genus and species), source (according to completion unit, completion person and
                                country), total data (Gb), total coding gene number, tRNA, rRNA, etc</p>
                        </li>
                    </ul>*@
                </section>

            </div>
                <!-- home left side -->

            <aside id="sidebar">

                <div class="box">
                    <div class="box-1">
                        <ul>
                            <li><a href="/US/PODB/chloroplast/gbMoreInfo?id=1" target="_blank">
                                <img src="/PODB/utils/getCpimg?id=1" />
                                <h2>Nitzschia</h2>
                            </a>
                            </li>
                            <li><a href="/US/PODB/chloroplast/gbMoreInfo?id=2" target="_blank">
                                <img src="/PODB/utils/getCpimg?id=2" />
                                <h2>Seminavis robusta strain</h2>
                            </a>
                            </li>
                            <li><a href="/US/PODB/chloroplast/gbMoreInfo?id=3" target="_blank">
                                <img src="/PODB/utils/getCpimg?id=3" />
                                <h2>Odontella</h2>
                            </a>
                            </li>
                            <li><a href="/US/PODB/mitochondria/mtMoreInfoPage?id=1" target="_blank">
                                <img src="/PODB/utils/getMtimg?id=1" />
                                <h2> Didymosphenia</h2>
                            </a>
                            <li><a href="/US/PODB/mitochondria/mtMoreInfoPage?id=24" target="_blank">
                                <img src="/PODB/utils/getMtimg?id=13" />
                                <h2>Skeletonema marinoi voucher</h2>
                            </a>
                            </li>
                        </ul>
                    </div>
                </div>



                <style>
                        .rpanel {
                            margin-top: 20px;
                            border: 1px solid #ddd;
                            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
                            border-radius: 5px;
                        }

                        .rpanel-header {
                            background-color: #5AABBC;
                            height: 40px;
                            line-height: 40px;
                            padding-left: 15px;
                        }

                        .rpanel-title {
                            color: white;
                        }

                        .rpanel-body {
                            padding: 15px 15px 0 15px;
                        }

                        .ui.big.label {
                            font-size: 16px;
                        }

                </style>


                <div class="ui raised segment">
                    <h4 class="text-primary"><span class="ui teal ribbon label big"><i class="fas fa-chart-pie"></i>
                        Data Statistics</span>
                    </h4>
                    <br>
                    <p><i class="fa fa-chevron-circle-right"></i> Chloroplast Genomes: <a href="@routes.ChloroplastController.chloroplastPage()" target="_blank" style='color: cornflowerblue;'>300+</a></p>
                    <p><i class="fa fa-chevron-circle-right"></i> Mitochondria Genomes: <a href="@routes.MitochondriaController.mitochondriaGenomeBefore()" target="_blank" style='color: cornflowerblue;'>300+</a></p>
                    <p><i class="fa fa-chevron-circle-right"></i> Germplasm Resources: <a  href="@routes.MitochondriaController.mapBefore("0")" target="_blank" style='color: cornflowerblue;'>700+</a></p>
                </div>

                <div class="ui raised segment">
                    <h4 class="text-primary"><span class="ui teal ribbon label big"><i class="fas fa-chart-pie"></i>
                        Release Notes </span>
                    </h4>
                    <br>
                    <p><i class="fa fa-chevron-circle-right"></i>
                        Phycophyta Organelle database is available online on June 2019.</p>

                </div>

                <div class="rpanel" style="display: none">
                    <div class="rpanel-header">
                        <h3 class="rpanel-title">Release Notes</h3>
                    </div>
                    <div class="rpanel-body">

                        <p><i class="fa fa-chevron-circle-right"></i>
                            Organelle genomes platform is available online on June 2019.</p>

                    </div>
                </div>

            </aside>

        </div>


        <div id="content" class="full-width"></div>


    </div>
        <!-- end of container -->

    <script src="@routes.Assets.versioned("img-carousel/carousel.js")" type="text/javascript"></script>

    <script src="@routes.Assets.versioned("Highmaps-6.1.0/highmaps.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highmaps-6.1.0/exporting.js")" type="text/javascript"></script>
    <script>

        function showSearchExample() {
            $("#searchInfo").val("Rhodophyta Bangiophyceae");
        }



        // 动态加载 Script
        function loadScript(url, callback){
            var script = document.createElement("script");
            script.type = "text/javascript";
            if (script.readyState){  //IE
                script.onreadystatechange = function(){
                    if (script.readyState == "loaded" ||
                            script.readyState == "complete"){
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {  //Others
                script.onload = function(){
                    callback();
                };
            }
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }
        /*
         * 获取链接的 map 参数
         * map 参数值为地图的路径，所有文件路径参考 https://img.hcharts.cn/mapdata/index.html
         */
        function getMapName(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"),
                    r = window.location.search.substr(1).match(reg),
                    defaultMap = {
                        path: 'custom/world',
                        name: ' '
                    };
            if(r!==null) {
                var path = unescape(r[2]);
                for(var key in Highcharts.mapsInfo) {
                    if(Highcharts.mapsInfo[key][path]) {
                        return {
                            path: path,
                            name: Highcharts.mapsInfo[key][path].name,
                            cname: Highcharts.mapsInfo[key][path].chineseName || ''
                        };
                    }
                }
            }
            return defaultMap;
        }
        // 地图路径，参考 https://img.hcharts.cn/mapdata/index.html
        var map = getMapName('map'),
                url = '/assets/Highmaps-6.1.0/world.js';



        // 动态加载地图数据文件并生成图表。
        loadScript(url, function(){
            // 生成随机数据
            var mapdata = Highcharts.maps[map.path],
                    data = [];

            $.ajax({
                url:"@routes.LocationController.getMtWorldData()",
                type:"post",
                success:function (datas) {
                    Highcharts.each(datas,function (v,i) {
                        data.push({
                            'hc-key':v.key,
                            value:v.num
                        })
                    })

                    // 初始化图表
                    $('#worldmap').highcharts('Map', {
                        title : {
                            text : map.cname || map.name
                        },
                        subtitle : {
                            text : ''
                        },
                        mapNavigation: {
                            enabled: true,
                            enableMouseWheelZoom:false,
                            buttonOptions: {
                                verticalAlign: 'bottom'
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        colorAxis: {
                            min: 0,
                            stops: [
                                [0, '#EFEFFF'],
                                [0.5, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
                            ]
                        },
                        series : [{
                            data : data,
                            mapData: mapdata,
                            joinBy: 'hc-key',
                            name: '物种数',
                            allowPointSelect: true,
                            cursor: 'pointer',
                            states: {
                                hover: {
                                    color: '#a4edba'
                                },
                                select: {
                                    color: 'orange',
                                    borderColor: 'black',
                                    dashStyle: 'shortdot'
                                }
                            },
                            dataLabels: {
                                enabled: false,
                                format: '{point.name}'
                            },
                            point: {
                                events: {
                                    click: function () {
                                        window.open("/US/PODB/mitochondria/mapBefore?key=" + this["hc-key"] + "#showTable")
                                    }
                                }
                            }
                        }]
                    });

                }
            })


        });




    </script>

}
